<template>
	<view class="content">
		<z-paging ref="paging">
			<!-- 需要固定在顶部不滚动的view放在slot="top"的view中，如果需要跟着滚动，则不要设置slot="top" -->
			<template #top>
				<div class="navBar" :style="{height:navBarHeight}">
					<view class="views" :style="{height:navBarHeight}"></view>
					<view class="headerBar" :style="{top:top,height:height}">
						<image src="/static/images/Frame@2x.png" class="zdysao" v-if="qxmanage.isWriteOff===1"
							@click="scan"></image>
					</view>
				</div>
				<image class="homeImg" src="/static/images/banner.png"
					style="height: 200px;position: relative;z-index: 1;">
				</image>
				<div class="baseCon" style="position: relative;z-index: 2;margin-top: -40px;">
					<div class="item-title">数据概览</div>
					<div class="banView">
						<div class="banv50">
							<div class="p1">今日收款(元)</div>
							<div class="p2" style="color: #4475EE;">{{resData1.receivedPaymentToday | formatsNumber}}
							</div>
						</div>
						<div class="banv50">
							<div class="p1">今日加油(升)</div>
							<div class="p2">{{resData1.petroleumToday | formatsNumber}}</div>
						</div>
					</div>
					<div class="banView">
						<div class="banv50">
							<div class="p1">累计收款(元)</div>
							<div class="p2">{{resData1.accumulatedReceipts | formatsNumber}}</div>
						</div>
						<div class="banv50">
							<div class="p1">累计加油(升)</div>
							<div class="p2">{{resData1.accumulatedPetroleum | formatsNumber}}</div>
						</div>
					</div>
				</div>
			</template>

			<div class="baseCon" style="margin-top: 12px;">
				<div class="item-title">收款数据统计</div>
				<div class="zflex zcenter" style="gap:12px;margin-top: 12px;">
					<div class="timeq" :class="selTimeType==1?'timeSel':''" @click="choseSel(1)">本年</div>
					<div class="timeq" :class="selTimeType==2?'timeSel':''" @click="choseSel(2)">本月</div>
					<div class="timeRang" style="width: calc(100% - 142px);">
						<uni-datetime-picker v-model="time" type="daterange" :end="maxTime" :border="false"
							:clear-icon="false" style="width: 100%;" @change="choseSel3()" />
					</div>
				</div>
				<div style="margin-top: 12px;">油站概况</div>

				<!-- <view id="chart-container" style="width:100%;height:300px"></view> -->
				<view style="height:200px;margin-top: 12px;">
					<!-- @finished="init" -->
					<l-echart ref="chartRef" @finished="init"></l-echart>
				</view>

			</div>



			<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->

		</z-paging>
		<rzView :station="station" v-if="station.stationAuth==0||station.stationAuth==4"></rzView>
	</view>

</template>

<script>
	// import * as echarts from './echarts.min'
	import * as echarts from '@/uni_modules/lime-echart/static/echarts.min'
	import {
		upperHalfCard,
		lowerPartChart,
		getUserInfo,
	} from '@/request/api.js'
	import {
		parseTime
	} from '../../utils/common'
	import rzView from '@/pages/my/company/rzCard.vue'
	export default {
		components: {
			rzView
		},
		data() {
			return {
				top: '',
				height: '',
				navBarHeight: '',
				show: true,
				time: [],
				selTimeType: 1,
				maxTime: parseTime(new Date(), "{y}-{m}-{d}"),
				resData1: {
					accumulatedPetroleum: 0,
					accumulatedReceipts: 0,
					petroleumToday: 0,
					receivedPaymentToday: 0,
				},
				lineList: [],
				refueleQuantityList: [],
				stationAmountList: [],
				loadOver: false,
				station: {
					stationAuth: null, //0未认证 1认证中 2已认证 3认证失败 4未上传企业资质
					stationId: null,
				},

				qxmanage: {
					isAfterSales: 0, // 售后权限 1是 0否
					isManageer: 0, // 是否管理员 1是 0否
					isWriteOff: 0, // 核销权限 1是 0否
				},
			}
		},
		mounted() {
			//console.log('kefuPhone', getApp().globalData.kefuPhone)
			this.getheight()
		},
		onLoad() {
			this.getMsg1();
			this.getMsg2()
		},
		onShareAppMessage() {
			return {
				title: ' ',
				path: '/pages/index/index'
			};
		},
		onShow() {
			this.getUInfo()
		},
		methods: {
			getMsg1() {
				upperHalfCard().then(res => {
					this.resData1 = res.data
				})
			},
			getMsg2() {
				let data = {
					dateStart: this.time[0] || '', //开始时间
					dateEnd: this.time[1] || '', //开始时间
					type: this.selTimeType, // 1-年2-月3-时间段 */
				}
				this.loadOver = false
				lowerPartChart(data).then(res => {
					this.lineList = res.data.dateList
					this.stationAmountList = res.data.stationAmountList
					this.refueleQuantityList = res.data.refueleQuantityList
					this.loadOver = true
					setTimeout(() => {
						this.init()
					}, 300)

					// res.dataList//时间轴
					// res.stationAmountList//钱
					// res.refueleQuantityList//量
				}).catch(res => {
					this.loadOver = false
				})
			},
			choseSel(e) {
				this.selTimeType = e
				this.getMsg2()
			},
			choseSel3() {
				if (this.time[0] != this.time[1]) {
					const hday = this.calculateDaysDifference(this.time[0], this.time[1])
					if (hday > 31) {
						uni.$u.toast('相差时间不能超过31天！')
						return
					} else {
						this.selTimeType = 3
						this.getMsg2()
					}
				}
			},
			calculateDaysDifference(date1, date2) {
				// 将输入的日期字符串转换为Date对象
				const d1 = new Date(date1);
				const d2 = new Date(date2);

				// 获取两个日期的毫秒数并计算差值
				const diffTime = Math.abs(d2.getTime() - d1.getTime())
				// 计算相差的天数
				const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24)); // 使用Math.ceil()取整，以防有小数（例如，相差时间刚好在一天的边界上）
				return diffDays;
			},

			async init() {
				let nums = 100
				let zoomShow = false
				if (this.lineList.length > 7) {
					zoomShow = true
					nums = 700 / this.lineList.length
				} else {
					zoomShow = false
					nums = 100;
				}
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				// chart.setOption(this.option)
				chart.setOption({
					xAxis: {
						type: 'category',
						boundaryGap: false,
						data: this.lineList,
						// axisLabel: {
						// 	interval: 0,
						// 	rotate: 30
						// }
					},
					grid: {
						left: '1%',
						right: '1%',
						bottom: '16%',
						top: '5%',
						containLabel: true
					},
					dataZoom: [
						// 滚动条
						{
							start: 0, //默认为0
							end: nums, //默认为100
							type: "slider",
							show: true,
							xAxisIndex: [0],
							handleSize: 0, //滑动条的 左右2个滑动条的大小
							height: 8, //组件高度
							left: "1%", //左边的距离
							right: "1%", //右边的距离
							bottom: 1, //右边的距离
							borderColor: "#f8f8f9",
							fillerColor: "#ccc",
							borderRadius: 5,
							backgroundColor: "#f8f8f9", //两边未选中的滑动条区域的颜色
							showDataShadow: false, //是否显示数据阴影 默认auto
							showDetail: false, //即拖拽时候是否显示详细数值信息 默认true
							realtime: true, //是否实时更新
							filterMode: "filter",
						},
						// 拖动内容
						{
							type: "inside",
							show: true,
							xAxisIndex: [0],
							start: 0, //默认为1
							end: nums, //默认为100
							zoomOnMouseWheel: false, // 关闭滚轮缩放
							moveOnMouseWheel: true, // 开启滚轮平移
							moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
						},
					],
					yAxis: {
						type: 'value',
					},
					series: [{
							name: '加油',
							type: 'line',
							data: this.refueleQuantityList,
							stack: 'Total',
							itemStyle: {
								normal: {
									color: '#007aff',
									lineStyle: {
										color: '#007aff',
										width: 2
									},
									areaStyle: {
										color: '#EEF2FD'
									}
								}
							},
							smooth: true
						},
						{
							name: '收款',
							type: 'line',
							data: this.stationAmountList,
							stack: 'Total',
							itemStyle: {
								normal: {
									color: '#ff7c43',
									lineStyle: {
										color: '#ff7c43',
										width: 2
									},
									areaStyle: {
										color: '#FFF8F3'
									}
								}
							},
							smooth: true
						}
					],
					legend: {
						data: ['加油', '收款'],
						bottom: 10
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						}
					},
				})
			},

			getheight() {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
				const res = uni.getSystemInfoSync();
				let {
					statusBarHeight
				} = res;
				let {
					top,
					height,
					bottom
				} = menuButtonInfo;
				//顶部距离 
				this.top = top + 'px';
				//胶囊高度
				this.height = height + 'px';
				//顶部导航栏高度
				let wrap = bottom - height - statusBarHeight;
				this.navBarHeight = bottom + wrap + 'px';
			},

			getUInfo() {
				getUserInfo().then(res => {
					this.qxmanage.isWriteOff = res.isWriteOff
					this.qxmanage.isManageer = res.isManageer
					this.qxmanage.isAfterSales = res.isAfterSales

					this.station.stationAuth = res.stationAuth
					this.station.stationId = res.stationId
					if (res.stationAuth == 1 || res.stationAuth == 3) {
						this.goPage('/pages/my/company/detail?id=' + res.stationId)
					}
				})
			},
			goPage(row) {
				uni.navigateTo({
					url: row,
				})
			},

			scan() {
				const that = this
				uni.scanCode({
					onlyFromCamera: true, //不允许从相册选择图片
					success: function(res) {
						//console.log(res.result)
						let data = {
							verificationCode: res.result
						}
						confirmVerificationDetails(data).then(rsy => {
							that.goPage('/pages/writeoff/confirm?id=' + rsy.data.id)
						})
					},
				})
				// const ewm =
				// 	'DhApvEHHA33umb6Bot/BZxUluunPmFCGJKyVFdNouX+xjbMrijv2aFNERC3PUvz/TkYpBIpFwNSBvw9LtW+vN41o70gBOmG2yLtzvOJ0+bc='
			},
		}
	}
</script>

<style scoped>
	.navBar {
		width: 100%;
		position: relative;
		left: 0;
		z-index: 99;
	}

	.navBar .views {
		background: #fff;
	}

	.headerBar {
		display: flex;
		position: absolute;
		width: 100%;
		z-index: 999;
		text-align: center;
		align-items: center;
	}

	.zdysao {
		width: 24px;
		height: 24px;
		margin-left: 16px;
	}

	.banView {
		display: flex;
		padding: 14px 12px 0 14px;
		border-radius: 12px;
		box-sizing: border-box;
		background: #fff;
	}

	.banv50 {
		width: 50%;
		box-sizing: border-box;
	}

	.banv50 .p1 {
		font-size: 13px;
		color: #63666B;
		margin-bottom: 4px;
	}

	.banv50 .p2 {
		font-size: 20px;
		font-weight: 600;
	}

	.timeRang {
		width: 100px;
	}
</style>